<template>
  <view class="book-list-page bg-gray-100 min-h-screen">
    <!-- 顶部返回+标题 -->
    <view
      class="flex items-center justify-center bg-white h-12 border-b border-gray-100 mb-2 relative"
    >
      <view
        class="absolute left-0 top-0 h-full flex items-center pl-3"
        @click="goBack"
        >←</view
      >
      <view class="text-base font-bold">牛津1级</view>
    </view>

    <!-- 筛选按钮区 -->
    <view class="flex gap-2 flex-wrap mb-4 px-2">
      <view v-for="btn in filterBtns" :key="btn" class="filter-btn">{{
        btn
      }}</view>
    </view>

    <!-- 卡片瀑布流 -->
    <view
      class="flex flex-wrap"
      style="margin-inline: 48rpx; row-gap: 24rpx; column-gap: 36rpx"
    >
      <view
        v-for="item in bookList"
        :key="item.id"
        class="book-card"
        style="background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%)"
        @click.self="toRead(item.id)"
      >
        <view class="book-badge" :class="item.read ? 'read' : 'unread'">{{
          item.read ? "已读" : "未读"
        }}</view>
        <view v-if="isChoice == 1" class="book-badge2" @click.stop="">
          <wd-checkbox
            v-model="item.checkbox"
            ref="checkBox1"
            custom-style="margin:0;"
            shape="square"
            size="large"
          ></wd-checkbox>
        </view>
        <image
          :src="item.coverUrl"
          style="height: 140px; width: 100px"
          mode="aspectFit"
        />
        <view class="book-title">{{ item.title }}</view>
        <view class="book-en">{{ item.publisher }}</view>
      </view>
    </view>
    <view v-if="isChoice == 1" class="bottom-line">
      <wd-button @click="confirmChoice">选好了</wd-button>
      <view @click.stop="">
        <wd-checkbox
          v-model="isAll"
          ref="checkBox1"
          custom-style="margin:0;"
          shape="square"
          size="large"
          @change="changeAll"
          >全选</wd-checkbox
        >
      </view>
      <view>
        test
      </view> 
    </view>
  </view>
</template>

<script setup lang="ts">
import { http } from "@/utils/http";
import { ref } from "vue";
const filterBtns = ["默认排序", "书名排序", "收藏", "离线下载"];
const level = ref();
const bookList = ref([]);
const isChoice = ref();
const isAll = ref();

// {
//     id: 1,
//     title: "MY FAMILY",
//     en: "My Family",
//     emoji: "👨‍👩‍👧‍👦",
//     bg: "linear-gradient(135deg, #fceabb 0%, #f8b500 100%)",
//     read: false,
//   }

onLoad((options) => {
  level.value = options.level;
  isChoice.value = options.isChoice;
  init();
});
const goBack = () => {
  uni.navigateBack();
};

const init = async () => {
  await http
    .get(`/admin-api/picturebook/book/get-by-level?level=${level.value}`)
    .then((res) => {
      bookList.value = res.data;
      console.log(res.data);
    });
};

const changeAll = ({ value }) => {
  bookList.value.forEach((item) => {
    item.checkbox = value;
  });
};

const toRead = (id) => {
  if(!(isChoice.value == 1)) {
    toLink(`/pages-sub/index/reading-detail?id=${id}`)
  }
}
  

const confirmChoice = () => {
  var bookData
  uni.getStorage({
    key: 'books',
    success: (res) => {
      bookData = res.data
      console.log(bookData);
      
      uni.getStorage({
        key: 'idx',
        success: (result) => {
          console.log(result.data);
          bookData[result.data] = bookList.value.filter((item) => {return item.checkbox})
          console.log(bookData)
          uni.setStorage({
            key: 'books',
            data: bookData
          })
        }
      })
    }
  })
  
  
  // 
  // uni.setStorage({
  //   key: 'books',
  //   data
  // })
  // console.log(data);
  
  uni.navigateBack({
    delta: 2
  });
};

function toLink(url) {
  uni.navigateTo({ url });
}
</script>

<style scoped>
.book-list-page {
  background: #f7f8fa;
}
.filter-btn {
  background: #fff;
  color: #888;
  border-radius: 18px;
  font-size: 14px;
  padding: 6px 18px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  margin-bottom: 2px;
}
.book-card {
  z-index: 0;
  width: 140px;
  height: 180px;
  border-radius: 18px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
  padding: 16px 10px 12px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 180px;
  transition: box-shadow 0.2s;
  margin-bottom: 2px;
}
.book-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 13px;
  border-radius: 10px;
  padding: 2px 12px;
  z-index: 999;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
}
.book-badge2 {
  position: absolute;
  right: 0px;
  top: 10px;
  font-size: 13px;
  border-radius: 10px;
  /* padding: 2px 12px; */
  z-index: 999;
  font-weight: 500;
  color: #fff;
}
.book-badge.read {
  background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
}
.book-badge.unread {
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
}
.book-title {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  /* margin-bottom: 8px; */
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-en {
  font-size: 13px;
  color: #fff;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-line {
  background: #fff;
  position: fixed;
  bottom: 0;
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style> 